<template>
  <div class="container">
    <!-- 左侧盒子 -->
    <div class="left">
      <!-- 树形图 -->
      <div class="tree">
        <el-tree
          ref="tree"
          :data="institutionList"
          :props="institutionProps"
          :expand-on-click-node="false"
          icon-class="el-icon-circle-plus"
          highlight-current
          node-key="id"
          :default-expanded-keys="defaultExpandedKeys"
          @node-click="nodeClick"
        />
      </div>
    </div>

    <!-- 右侧盒子 -->
    <div class="right">
      <!-- 机构信息 -->
      <div class="top">
        <div class="institutionTitle">
          机构信息
        </div>
        <div class="institutionForm">
          <!-- 放置form表单组件 -->
          <el-form :model="institutionFormData" status-icon label-width="100px" class="demo-ruleForm">
            <!-- 放置布局layout组件 -->
            <el-row>
              <el-col :span="8">
                <el-form-item label="机构编号">
                  <el-input v-model="institutionFormData.id" :disabled="alwaysDisable" type="text" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构名称">
                  <el-input v-model="institutionFormData.name" :disabled="alwaysDisable" type="text" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构类型">
                  <el-select v-model="institutionFormData.type" :disabled="alwaysDisable" style="width: 100%" placeholder="请选择">
                    <el-option
                      v-for="item in institutionType"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item label="机构地址">
              <el-row>
                <el-col :span="8">
                  <el-select v-model="institutionFormData.province" :disabled="isTempDisable" style="width: 100%" placeholder="请选择省">
                    <el-option
                      v-for="item in provinceList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="institutionFormData.city" :disabled="isTempDisable" style="width: 100%" placeholder="请选择市">
                    <el-option
                      v-for="item in cityList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
                <el-col :span="8">
                  <el-select v-model="institutionFormData.county" :disabled="isTempDisable" style="width: 100%" placeholder="请选择县0">
                    <el-option
                      v-for="item in countyList"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id"
                    />
                  </el-select>
                </el-col>
              </el-row>
            </el-form-item>

            <el-row>
              <el-col :span="8">
                <el-form-item label="详细地址">
                  <el-input v-model="institutionFormData.address" :disabled="isTempDisable" type="text" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="经度">
                  <el-input v-model="institutionFormData.latitude" :disabled="alwaysDisable" type="text" autocomplete="off">
                    <template slot="append">E</template>
                  </el-input>
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="纬度">
                  <el-input v-model="institutionFormData.longitude" :disabled="alwaysDisable" type="text" autocomplete="off">
                    <template slot="append">N</template>
                  </el-input>
                </el-form-item>
              </el-col>
            </el-row>

            <el-row>
              <el-col :span="8">
                <el-form-item label="机构负责人">
                  <el-input v-model="institutionFormData.managerName" :disabled="isTempDisable" type="text" autocomplete="off" />
                </el-form-item>
              </el-col>
              <el-col :span="8">
                <el-form-item label="机构电话">
                  <el-input v-model="institutionFormData.phone" :disabled="isTempDisable" type="text" autocomplete="off" />
                </el-form-item>
              </el-col>
            </el-row>

            <el-row type="flex" class="row-bg" justify="center">
              <el-form-item>
                <el-button
                  v-if="isTempDisable"
                  type="primary"
                  style="background-color:#e15637;
                    border-radius: 10%;
                    border: none;"
                  @click="isTempDisable = false"
                >编辑</el-button>
                <el-button
                  v-else
                  style="background-color:#e15637;
                  color: #fff;
                    border-radius: 10%;
                    border: none;"
                  @click="$message.error('演示数据不允许更改')"
                >保存</el-button>
              </el-form-item>
            </el-row>
          </el-form>
        </div>
      </div>
      <!-- 员工信息 -->
      <div class="bottom">
        <div class="employeeTitle">
          员工信息
        </div>
        <div class="table">
          <!-- 放置table组件 -->
          <el-table
            :data="employeeList"
            highlight-current
            stripe
            border
          >
            <!-- 放置列 -->
            <el-table-column align="center" width="50" label="序号" type="index" />
            <el-table-column prop="userId" align="center" width="200" label="员工编号" />
            <el-table-column prop="name" align="center" label="员工姓名" />
            <el-table-column prop="mobile" align="center" label="手机号" />
            <el-table-column prop="agency.name" align="center" label="所属机构" />
            <el-table-column prop="account" align="center" label="系统账户" />
            <el-table-column prop="roleNames" align="center" label="系统角色" />
            <el-table-column prop="status" align="center" label="账号状态">
              <template v-slot="rowStatus">
                <span
                  class="tableColumn-status"
                  :class="{ 'stop-use': !rowStatus.row.status }"
                >{{ rowStatus.row.status === 0 ? "禁用" : "正常" }}</span>
              </template>
            </el-table-column>
          </el-table>
          <!-- 放置分页组件 -->
          <el-pagination
            :current-page="currentPage4"
            :page-sizes="[5,10, 20, 30, 40]"
            :page-size="5"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </div>

    </div>
  </div>
</template>

<script>

import { getAddressMessage, getEmployeePage, getInstitutionDetail, getInstitutionList } from '@/api/institution'

export default {
  name: 'BasicData',
  data() {
    return {
      // 树状机构数据
      institutionList: [],
      // 树状结构默认属性
      institutionProps: {
        label: 'name',
        children: 'children'
      },
      currentPage: 4,
      // 机构数据渲染
      institutionFormData: {
        id: '', // id
        name: '', // 名称
        type: '', // 类型
        province: '', // 省
        city: '', // 市
        county: '', // 县
        address: '', // 地址
        longitude: '', // 经
        latitude: '', // 纬
        managerName: '', // 负责人
        phone: '' // 电话
      },
      // 机构类型选择框数据
      institutionType: [
        {
          value: 1,
          label: '一级转运'
        },
        {
          value: 2,
          label: '二级转运'
        },
        {
          value: 3,
          label: '网点'
        }
      ],
      // 禁用按钮
      isTempDisable: true, // 临时
      alwaysDisable: true, // 禁用
      // 默认展开tree节点
      defaultExpandedKeys: [],
      // 省市县的数组
      provinceList: [],
      cityList: [],
      countyList: [],
      // 获取员工分页数据参数
      employeeParams: {
        page: '1',
        pageSize: '5',
        agencyId: ''
      },
      // 员工数据
      employeeList: [],
      total: '' // 总条数
    }
  },
  async created() {
    // 获取树状机构信息
    await this.getInstitutionList()
    // 设置默认展开tree节点
    this.defaultExpandedKeys = [this.institutionList[0].children[0].id]
    // 设置默认选中
    const currentId = this.institutionList[0].children[0].children[0].id
    this.$refs.tree.setCurrentKey(currentId)

    // 调用直接获取省份
    this.getProvinceList()
  },
  methods: {
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    // 获取树状机构信息
    async getInstitutionList() {
      const result = await getInstitutionList()
      this.institutionList = JSON.parse(result.data.data)
    },
    // 获取机构详情
    async getInstitutionDetail(id) {
      const result = await getInstitutionDetail(id)
      // 赋值
      // this.institutionFormData = result.data.data
      this.institutionFormData = {
        id: result.data.data.id,
        name: result.data.data.name,
        type: result.data.data.type,
        province: result.data.data.province.id,
        city: result.data.data.city.id,
        county: result.data.data.county.id,
        address: result.data.data.address,
        longitude: result.data.data.longitude,
        latitude: result.data.data.latitude,
        managerName: result.data.data.managerName,
        phone: result.data.data.phone
      }
    },
    // 点击获取机构id
    async nodeClick(data) {
      await this.getInstitutionDetail(data.id)
      // 获取市
      this.getCityList(this.institutionFormData.province)
      // 获取县
      this.getCountyList(this.institutionFormData.city)
      // 获取员工分页数据
      this.employeeParams.agencyId = data.id
      this.getEmployeePageList()
    },
    // 获取省份
    async getProvinceList() {
      const result = await getAddressMessage()
      this.provinceList = result.data.data
      // console.log(this.provinceList)
    },
    // 获取市
    async getCityList(id) {
      const result = await getAddressMessage(id)
      this.cityList = result.data.data
    },
    // 获取县
    async getCountyList(id) {
      const result = await getAddressMessage(id)
      this.countyList = result.data.data
    },
    // 获取员工分页数据
    async getEmployeePageList() {
      const result = await getEmployeePage(this.employeeParams)
      this.employeeList = result.data.data.items
      this.total = +result.data.data.counts
    }
  }
}
</script>

<style scoped>
.container{
  padding-top: 20px;
  display: flex;
  justify-content: space-between;
  height: auto;
  background-color: #f3f4f7;
}
.left{
  margin-right: 20px;
  width: 220px;
  /* height: 100%; */
  background-color: #fff;
  border-bottom: 1px solid #ebeef5 ;
}
.right{
  display: flex;
  flex: 1;
  justify-content: space-between;
  flex-direction: column;
  /* background-color: #8a8bf0; */
}
.top{
  border: 1px solid #ebeef5 ;
  background-color: #fff;
}
.bottom{
  flex:1;
  margin-top: 20px;
  border: 1px solid #ebeef5 ;
}
.table{
  padding: 30px;
  background-color: #fff;
}
.employeeTitle{
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  background-color: #fafafa;
  font-weight: 700;
  border-bottom: 1px solid #ebeef5 ;
}
.institutionTitle{
  padding-left: 10px;
  height: 50px;
  line-height: 50px;
  background-color: #fafafa;
  font-weight: 700;
  border-bottom: 1px solid #ebeef5 ;
}
/* 分页组件位置 */
.el-pagination{
  margin-top:20px;
  text-align: center
}
.institutionForm{
  padding: 30px;
}
/* 小圆点 */
.tableColumn-status:before {
  width: 6px;
  height: 6px;
  background: #1dc779;
  border-radius: 50%;
  content: "";
  display: inline-block;
  margin-right: 6px;
}
.stop-use:before {
  background-color: #e15536;
}
</style>
